<!--
 * @Description: 一卡通编辑页面
 * @Author: Li Yujie
 * @Date: 2020/12/22
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/01/09
-->
<template>
    <div
        class="wrapper"
        ref="wrapper"
    >
        <div class="content-wrapper">
            <!-- title -->
            <div class="header">
                {{ type === 'edit' ? '编辑一卡通' : type === 'add' ? '新建一卡通' : '查看一卡通' }}
            </div>

            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="140px"
                        class="form-wrap"
                    >
                        <div class="title">
                            基本信息
                        </div>
                        <el-form-item
                            label="一卡通标题"
                        >
                            <el-input
                                v-model="ruleForm.title"
                                maxlength="12"
                                show-word-limit
                                size="medium"
                                disabled
                                :style="{width: '400px'}"
                            />
                        </el-form-item>
                        <div
                            class="title"
                            :style="{marginTop: '52px'}"
                        >
                            一卡通售价和佣金设置
                        </div>
                        <el-form-item label-width="60px">
                            <el-table
                                :data="ruleForm.buy_config"
                                class="data-table member-card-edit__table"
                            >
                                <el-table-column
                                    label="一卡通套餐"
                                    prop="title"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <el-form-item style="margin-bottom: 16px">
                                            {{ scope.row.title }}
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="一卡通售价"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <el-form-item style="margin-bottom: 16px">
                                            <el-input
                                                v-model="scope.row.price"
                                                size="medium"
                                                disabled
                                                style="width: 128px"
                                            >
                                                <span slot="suffix">元</span>
                                            </el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="持卡有效天数"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <el-form-item style="margin-bottom: 16px">
                                            <el-input
                                                v-model="scope.row.valid_days"
                                                size="medium"
                                                disabled
                                                style="width: 128px"
                                            >
                                                <span slot="suffix">天</span>
                                            </el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="直属粉丝购卡佣金"
                                    align="center"
                                    width="200"
                                >
                                    <template slot-scope="scope">
                                        <el-form-item
                                            :prop="`buy_config[${scope.$index}].invite_award`"
                                            :rules="rules.invite_award"
                                            style="margin-bottom: 16px"
                                        >
                                            <el-input
                                                v-model="scope.row.invite_award"
                                                size="medium"
                                            >
                                                <span slot="suffix">元</span>
                                            </el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column width="60"/>
                            </el-table>
                        </el-form-item>
                        <div
                            class="title"
                            :style="{marginTop: '52px'}"
                        >
                            一卡通福利权益设置
                        </div>
                        <div class="welfare-view">
                            <!--送优惠券-->
                            <div class="welfare-item">
                                <div class="welfare-item__title">
                                    权益一：送优惠券
                                </div>
                                <div class="welfare-item__content">
                                    <div class="welfare-item__content-item">
                                        <div class="welfare-item__content-item__label">
                                            发放周期：
                                        </div>
                                        <div class="welfare-item__content-item__value">
                                            按自然周发放
                                        </div>
                                    </div>
                                    <div class="welfare-item__content-item">
                                        <div class="welfare-item__content-item__label">
                                            发放方式：
                                        </div>
                                        <div class="welfare-item__content-item__value">
                                            需要用户点击领取
                                        </div>
                                    </div>
                                    <el-form-item
                                        prop="coupon_get_limit"
                                        label-width="0px"
                                    >
                                        每个自然周限领
                                        <el-input
                                            oninput="value=value.replace(/[^0-9.]/g,'')"
                                            type="text"
                                            v-model="ruleForm.coupon_get_limit"
                                            size="medium"
                                            :style="{width: '142px', marginLeft: '6px'}"
                                            :disabled="type === 'detail'"
                                        >
                                            <p
                                                slot="suffix"
                                                :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '5px'}"
                                            >
                                                张
                                            </p>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                            <!--送红包-->
                            <div class="welfare-item">
                                <div class="welfare-item__title">
                                    权益二：送红包
                                </div>
                                <div class="welfare-item__content">
                                    <div class="welfare-item__content-item">
                                        <div class="welfare-item__content-item__label">
                                            发放周期：
                                        </div>
                                        <div class="welfare-item__content-item__value">
                                            按自然周发放
                                        </div>
                                    </div>
                                    <div class="welfare-item__content-item">
                                        <div class="welfare-item__content-item__label">
                                            发放方式：
                                        </div>
                                        <div class="welfare-item__content-item__value">
                                            需要用户点击领取
                                        </div>
                                    </div>
                                    <el-form-item
                                        prop="red_packet_get_limit"
                                        label-width="0px"
                                    >
                                        每个自然周限领
                                        <el-input
                                            oninput="value=value.replace(/[^0-9.]/g,'')"
                                            type="text"
                                            v-model="ruleForm.red_packet_get_limit"
                                            size="medium"
                                            :style="{width: '142px', marginLeft: '6px'}"
                                            :disabled="type === 'detail'"
                                        >
                                            <p
                                                slot="suffix"
                                                :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '5px'}"
                                            >
                                                张
                                            </p>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                            <!--一分钱商品-->
                            <div class="welfare-item">
                                <div class="welfare-item__title">
                                    权益三：1分钱领商品
                                </div>
                                <div class="welfare-item__content">
                                    <el-form-item
                                        prop="vip_free_goods_get_limit"
                                        label-width="0px"
                                    >
                                        每个会员月限领
                                        <el-input
                                            oninput="value=value.replace(/[^0-9.]/g,'')"
                                            type="text"
                                            v-model="ruleForm.vip_free_goods_get_limit"
                                            size="medium"
                                            :style="{width: '142px', marginLeft: '6px'}"
                                            :disabled="type === 'detail'"
                                        >
                                            <p
                                                slot="suffix"
                                                :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '5px'}"
                                            >
                                                个
                                            </p>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                            <!--会员商品-->
                            <div class="welfare-item">
                                <div class="welfare-item__title">
                                    权益四：会员专区商品
                                </div>
                                <div class="welfare-item__content">
                                    <div class="welfare-item__content-item">
                                        <div class="welfare-item__content-item__label">
                                            限购设置
                                        </div>
                                        <div
                                            class="welfare-item__content-item__value"
                                            style="margin-left: 16px;margin-top: -14px"
                                        >
                                            <el-form-item
                                                prop="vip_goods_get_limit"
                                                label-width="0px"
                                            >
                                                <el-radio-group
                                                    v-model="ruleForm.memberGoodsType"
                                                    class="el-radio-group-label"
                                                    :disabled="type === 'detail'"
                                                    @change="handleLimitChange"
                                                >
                                                    <el-radio
                                                        :label="1"
                                                        class="el-radio-wrap"
                                                    >
                                                        不限制购买数量
                                                    </el-radio>
                                                    <el-radio
                                                        :label="2"
                                                        class="el-radio-wrap sec"
                                                        :style="{marginTop: '24px'}"
                                                    >
                                                        <div>限制购买数量</div>
                                                        <div style="margin-top: 12px">
                                                            每个会员月限购
                                                            <el-input
                                                                oninput="value=value.replace(/[^0-9.]/g,'')"
                                                                type="text"
                                                                v-model.number="ruleForm.vip_goods_get_limit"
                                                                size="medium"
                                                                :style="{width: '142px',marginLeft: '6px'}"
                                                                :disabled="ruleForm.memberGoodsType === 1 || type === 'detail'"
                                                            >
                                                                <p
                                                                    slot="suffix"
                                                                    :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '5px', marginTop: '12px'}"
                                                                >
                                                                    个
                                                                </p>
                                                            </el-input>
                                                        </div>
                                                    </el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--商品折扣-->
                            <div class="welfare-item">
                                <div class="welfare-item__title">
                                    权益五：全平台自营商品折扣价
                                </div>
                                <div class="welfare-item__content">
                                    <div class="welfare-item__content-item">
                                        <div class="welfare-item__content-item__label">
                                            全平台商品折扣
                                        </div>
                                        <div
                                            class="welfare-item__content-item__value"
                                            style="margin-top: -24px;margin-left: 16px"
                                        >
                                            <el-form-item
                                                prop="vip_goods_discount"
                                                label-width="0px"
                                            >
                                                <el-radio-group
                                                    v-model="ruleForm.vip_goods_for_all"
                                                    :disabled="type === 'detail'"
                                                    class="el-radio-group-label"
                                                >
                                                    <el-radio
                                                        :label="1"
                                                        class="el-radio-wrap"
                                                    >
                                                        启用，全场商品打
                                                        <el-input
                                                            v-model="ruleForm.vip_goods_discount"
                                                            type="text"
                                                            size="medium"
                                                            :style="{width: '142px', marginLeft: '6px'}"
                                                            :disabled="type === 'detail' || ruleForm.vip_goods_for_all === 0"
                                                        >
                                                            <p
                                                                slot="suffix"
                                                                :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '5px', marginTop: '12px'}"
                                                            >
                                                                折
                                                            </p>
                                                        </el-input>
                                                    </el-radio>
                                                    <el-radio
                                                        :label="0"
                                                        :style="{marginTop: '24px'}"
                                                    >禁用，全场商品无一卡通折扣</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="title"
                            :style="{marginTop: '52px'}"
                        >
                            APP显示设置
                        </div>
                        <el-form-item
                            label="一卡通专享券区域显示设置"
                            label-width="200px"
                            style="margin-bottom: 12px"
                        >
                            <el-radio-group
                                v-model="ruleForm.coupon_show"
                                :disabled="type === 'detail'"
                            >
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">不显示</el-radio>
                            </el-radio-group>
                            <div
                                class="tips"
                                style="margin-top: -12px"
                            >说明：如果一卡通专享券区域无优惠券，则用户端也不显示一卡通专享券区域</div>
                        </el-form-item>
                        <el-form-item
                            label="一卡通专享红包区域显示设置"
                            label-width="200px"
                            style="margin-bottom: 12px"
                        >
                            <el-radio-group
                                v-model="ruleForm.red_packet_show"
                                :disabled="type === 'detail'"
                            >
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">不显示</el-radio>
                            </el-radio-group>
                            <div
                                class="tips"
                                style="margin-top: -12px"
                            >说明：如果一卡通专享红包区域无红包，则用户端也不显示一卡通专享红包区域</div>
                        </el-form-item>
                        <el-form-item
                            label="1分钱好物区域显示设置"
                            label-width="200px"
                            style="margin-bottom: 12px"
                        >
                            <el-radio-group
                                v-model="ruleForm.vip_free_goods_show"
                                :disabled="type === 'detail'"
                            >
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">不显示</el-radio>
                            </el-radio-group>
                            <div
                                class="tips"
                                style="margin-top: -12px"
                            >说明：如果1分钱好物区域无商品，则用户端也不显示1分钱好物区域</div>
                        </el-form-item>
                        <el-form-item
                            label="热销专区显示设置"
                            label-width="200px"
                            style="margin-bottom: 12px"
                        >
                            <el-radio-group
                                v-model="ruleForm.vip_goods_hot_show"
                                :disabled="type === 'detail'"
                            >
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">不显示</el-radio>
                            </el-radio-group>
                            <div
                                class="tips"
                                style="margin-top: -12px"
                            >说明：如果热销专区无商品，则用户端也不显示热销专区</div>
                        </el-form-item>
                        <el-form-item
                            label="一卡通专享价专区显示设置"
                            label-width="200px"
                            style="margin-bottom: 12px"
                        >
                            <el-radio-group
                                v-model="ruleForm.vip_goods_show"
                                :disabled="type === 'detail'"
                            >
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">不显示</el-radio>
                            </el-radio-group>
                            <div
                                class="tips"
                                style="margin-top: -12px"
                            >说明：如果一卡通专享价专区无商品，则用户端也不显示一卡通专享价专区</div>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- button -->
                <div class="footer">
                    <el-button
                        size="medium"
                        type="default"
                        style="margin-right: 32px"
                        @click="handleCancel()"
                    >
                        返回
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="handleSubmit()"
                        v-if="type !== 'detail'"
                    >
                        保存
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        v-if="type === 'detail'"
                        @click="type = 'edit'"
                    >
                        编辑
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/**
 * 页面接收参数
 * @param no - 一卡通编号
 * @param type - add新增 edit编辑 detail查看
 */

import {back} from '@/mixin/back';

export default {
    name: 'MemberCardEdit',
    data() {
        const validateMemberGoodsCount = (rule, value, callback) => {
            if (this.ruleForm.memberGoodsType === 2 && value === '') {
                callback(new Error('请填写一卡通专区每月限领数量'));
            } else {
                callback();
            }
        };

        const validateDiscount = (rule, value, callback) => {
            let reg = /^((0.[1-9]{1,2})|(([1-9]{1})(.\d{1,2})?))$/;

            if(this.ruleForm.vip_goods_for_all === 0) {
                callback();
            }
            if(this.ruleForm.vip_goods_for_all === 1) {
                if(!reg.test(value)) {
                    callback(new Error('请输入正确的折扣'));
                } else if(!value) {
                    callback(new Error('折扣不能为空'));
                } else {
                    callback();
                }
            }
        };

        return {
            // add新增 edit编辑 detail查看
            type: 'add',
            ruleForm: {
                // 编辑时一卡通编号
                vip_no: '',
                // 一卡通标题
                title: '',
                // 佣金设置
                buy_config: [],
                // 送优惠券数量
                coupon_get_limit: 4,
                // 送红包数量
                red_packet_get_limit: 4,
                // 0元商品数量
                vip_free_goods_get_limit: 1,
                // 一卡通专区商品设置
                memberGoodsType: 2,
                // 一卡通专区商品数量
                vip_goods_get_limit: 0,
                vip_goods_for_all: 0,
                // 折扣
                vip_goods_discount: '',
                // 是否显示热销专区
                vip_goods_hot_show: 1,
                // 是否显示优惠券
                coupon_show: 1,
                // 是否显示红包
                red_packet_show: 1,
                // 是否显示0元购
                vip_free_goods_show: 1,
                // 是否显示会员专区
                vip_goods_show: 1,
            },
            rules: {
                invite_award: [
                    {required: true, message: '请填写一级收益', trigger: 'blur'}
                ],
                coupon_get_limit: [
                    {required: true, message: '请填写优惠券限领数量', trigger: 'blur'}
                ],
                red_packet_get_limit: [
                    {required: true, message: '请填写红包限领数量', trigger: 'blur'}
                ],
                vip_free_goods_get_limit: [
                    {required: true, message: '请填写一分钱商品每月限领数量', trigger: 'blur'}
                ],
                vip_goods_get_limit: [
                    {validator: validateMemberGoodsCount, trigger: 'blur'},
                ],
                vip_goods_discount: [
                    {validator: validateDiscount, trigger: 'blur'}
                ]
            }
        };
    },
    mixins: [back],
    components: {},
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 页面初始化
         */
        init() {
            let query = this.$route.query;

            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {
                title: '一卡通管理',
                path: '/student/member-card-list'
            }, {title: query.type === 'edit' ? '编辑一卡通' : query.type === 'add' ? '新建一卡通' : '查看一卡通'}]);
            this.authResult = this.$route.meta.authResult;

            this.type = query.type;
            // 编辑或查看时
            if (query.type === 'edit' || query.type === 'detail') {
                this.ruleForm.vip_no = query.no;
                this.getDetail();
            }
        },

        /**
         * 获取详情
         */
        getDetail() {

            let params = {
                vip_no: this.ruleForm.vip_no
            };

            this.$post('/student/student_vip%5Cget', params, resp => {
                if (resp.code === 1) {

                    this.ruleForm = {...this.ruleForm, ...resp.data};
                    this.ruleForm.memberGoodsType = resp.data.vip_goods_get_limit === -1 ? 1 : 2;
                    this.ruleForm.vip_goods_discount = resp.data.vip_goods_discount ? resp.data.vip_goods_discount / 10 : '';
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    let params = {...this.ruleForm};

                    params.buy_config_json = JSON.stringify(params.buy_config);
                    params.vip_goods_discount = params.vip_goods_discount * 10;
                    delete params.buy_config;
                    this.$post('/student/student_vip%5Cset', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$router.push({
                                name: 'memberCardList'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        /**
         * @description 取消
         */
        handleCancel() {
            if (this.type === 'detail') {
                this.$router.push({
                    name: 'memberCardList'
                });
            } else {
                this.$confirm('返回后将不会保存您所修改的内容,是否返回', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({
                        name: 'memberCardList'
                    });
                });
            }
        },
        /**
         * 切换限制购买数量
         * @param val
         */
        handleLimitChange(val) {

            this.ruleForm.vip_goods_get_limit = val === 1 ? -1 : 1;
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }

        .header {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            white-space: nowrap;
            box-sizing: border-box;
            padding-left: 35px;
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
            flex-shrink: 0;

            &::before {
                content: '';
                background: rgba(24, 144, 255, 1);
                width: 3px;
                height: 20px;
                position: absolute;
                top: 23px;
                left: 25px;
            }
        }

        .form-view {
            background: #FBFBFB;
            border-radius: 2px;
            border: 1px solid #EEEEEE;
            margin: 24px;
            box-sizing: border-box;
            padding: 32px;

            /deep/ .el-input-number {
                input {
                    text-align: left;
                }
            }

            .title {
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                font-weight: 500;
                border-bottom: 1px #e9e9e9 solid;
                margin-bottom: 24px;
            }
            .tips {
                color: #999;
                margin-left: 12px;
            }

            .setting-view {
                margin-bottom: 24px;

                .base {
                    display: flex;

                    .el-form-item {
                        width: 220px;
                    }
                }
            }

            .el-radio-group-label {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                position: relative;
                margin-top: 14px;
            }

            .el-line {
                height: 112px;
            }

            .el-radio-wrap {
                display: flex;
                align-items: center;

                &.sec {
                    /deep/ .el-radio__input {
                        margin-top: -46px;
                    }
                }
            }
        }

        /*footer*/

        .footer {
            box-sizing: border-box;
            padding-left: 176px;
            margin-top: 8px;
            margin-bottom: 52px;

            .el-button {
                width: 120px;
                margin: 0 16px 12px;
            }
        }
    }

    .welfare-view {
        margin-left: 60px;
        .welfare-item {
            &__title {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-bottom: 24px;
            }
            &__content {
                margin-left: 56px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                &-item {
                    display: flex;
                    margin-bottom: 24px;
                    &__label {
                        color: #888888;
                    }
                    &__value {
                        color: #333;
                    }
                }
            }
        }
    }

    /*弹窗*/

    .form-title {
        margin: 16px 0;
        font-size: 14px;
        color: #333;
        position: relative;
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }
    .data-table {
        /deep/ .el-input__suffix {
            margin-top: 6px;
            margin-right: 6px;
        }
        /deep/ .el-form-item {
            .el-input__suffix {
                margin-top: 0;
            }
        }
    }
}
</style>

<style lang="less">
.el-table.member-card-edit__table {
    th {
        background: #f2f2f2!important;
    }
    td {
        background: #F7F7F7!important;
        border-bottom: 0;
    }
    &::before {
        background: #F7F7F7!important;
    }
    .el-table__header-wrapper {
        border-radius: 2px 2px 0 0;
        border: 1px solid #F4F4F4;
    }
    .el-table__header th {
        height: 54px;
        line-height: 54px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
    }
    .el-table__body-wrapper {
        padding-top: 12px;
        background: #F7F7F7;
    }
}
</style>
